<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="jquery/jquery-3.4.1.min.js"></script>
    <style>
        .red{
            color:red;
        }
    </style>
</head>
<body class=".container-fluid" bgcolor="#C8E5BC" style="background:url('images/bg.jpg') no-repeat; background-size:100% 90% ">
<div class="row" style="padding-top: 230px; padding-bottom: 240px">
    <div class="col-lg-4 col-md-offset-8">
        <div class="panel-info">
            <div class="panel-info text-center">
                <h3>用户注册</h3>
            </div>
        </div>
        <div class="panel-body ">
            <form class="form-horizontal" id="frmLogin">
                <div class="form-group">
                    <div class="col-sm-8 col-md-offset-2">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class= "glyphicon glyphicon-user"></span>
                            </div>
                            <input type="text" class="form-control" id="u_name"
                                   placeholder="用户名">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8 col-md-offset-2">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock"></span>
                            </div>
                            <input type="password" class="form-control" id="u_pwd1"
                                   placeholder="输入密码">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8 col-md-offset-2">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-ok"></span>
                            </div>
                            <input type="password" class="form-control" id="u_pwd2"
                                   placeholder="确认密码">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8 col-md-offset-2">
                        <div class="input-group">
                            <label>请选择创建身份：&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <select class="" id="u_roleid">
                                <option value="">—————————</option>
                                <option value="2">管理员</option>
                                <option value="3">用户</option>
                            </select>

                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="form-group">
            <label class="red hidden col-md-offset-2" id="errorLog">登录错误</label>
        </div>
        <div class="panel-info text-center">
            <button  class="btn btn-info btn-primary-outline col-md-6 col-md-offset-3" id="registerbtn">注册</button>
        </div>
        <div>
            <button class="btn btn-link pull-left" id="gotoLogin">去登录</button>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $("#registerbtn").click(function () {
            $.ajax({
                url:"user/insert",
                type:"post",
                dataType:"json",
                data:{
                    u_name:$("#u_name").val(),
                    u_pwd:$("#u_pwd1").val(),
                    u_roleid:$("#u_roleid").val()
                },
                //result封装成立json对象，解析result.
                success:function (result) {
                    var errorCode = result.errorCode;
                    // alert(JSON.stringify(result));
                    if(errorCode==0){
                        alert("注册成功");
                        $(location).attr("href","gotoLogin");
                    }else{
                        var msg = result.status;
                        $("#u_pwd").val("");
                        // alert(msg);
                        $("#errorLog").text(msg);
                        $("#errorLog").removeClass("hidden");
                    }
                },
                error:function (result) {

                }
            })
        });

        $("#gotoLogin").click(function () {
            $(location).attr("href","gotoLogin");
        });

        $("#u_name").blur(function () {
            $.ajax({
                url:"user/checkUserNameExist",
                type:"post",
                dataType:"json",
                data:{
                    u_name:$("#u_name").val(),

                },
                //result封装成立json对象，解析result.
                success:function (result) {
                    var errorCode = result.errorCode;
                    // alert(JSON.stringify(result));
                    if(errorCode==-1){
                        var msg = result.status;
                        $("#errorLog").text(msg);
                        $("#errorLog").removeClass("hidden");
                        $("#u_name").val("");
                    }else if(errorCode==0){
                        $("#errorLog").addClass("hidden");
                    }
                },
                error:function (result) {

                }
            })
        });

        $("#u_pwd2").blur(function () {
            var pwd1= $("#u_pwd1").val();
            var pwd2= $("#u_pwd2").val();
            if(pwd1 != pwd2){
                $("#errorLog").text("两次密码输入不一致");
                $("#errorLog").removeClass("hidden");
            }else{
                $("#errorLog").addClass("hidden");
            }
        });
    })
</script>
</body>
</html>